@import '~css/core/global.scss';

@media (min-width: 320px) {
  :host {
    .list-group-item {
      padding: 0rem 1.5rem;
    }
    @keyframes pulse {
      0% { transform: scale(0); opacity: 1 }	
      50% { transform: scale(1); opacity: .5; }
      100% { transform: scale(1.5); opacity: 0;}
    }

    @keyframes slideInDown {
        0% {
            transform: scale(0.4);
            opacity: 0;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
    .pulse {
      animation: pulse 2s infinite;
    }

    .btn-toggle .update-indicator {
      position: absolute;
      // transform: translateY(-8px);
      top: 13px; /* for pulse animation*/
    }
    .menu-dropdown {
      position: absolute;
      right: 0;
      top: -30rem;
      min-width: 250px;

      &.slideInDown {
        animation: slideInDown .5s 1;
        top: 5rem;
        transform-origin: top right;
      }
      .menu-backdrop {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }
    }
  }
}